<template>
  <div class="input-number-range">
    <a-input-number
      v-model="inputValueMin"
      size="small"
      @blur="(event) => handleValueChange(event, 'min')"
      @pressEnter="($event) => $event.target.blur()"
    />
    <span class="divider"></span>
    <a-input-number
      v-model="inputValueMax"
      size="small"
      @blur="(event) => handleValueChange(event, 'max')"
      @pressEnter="($event) => $event.target.blur()"
    />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'

@Component
export default class InputNumberRange extends Vue {
  @Prop() value!: number[]

  private inputValueMin: number = this.value[0]
  private inputValueMax: number = this.value[1]
  private commonProps = {
    size: 'small',
  }

  @Watch('value')
  private onValueChange() {
    ;[this.inputValueMin, this.inputValueMax] = this.value
  }

  private handleValueChange(event: any, type: 'min' | 'max') {
    if (type === 'min' && this.inputValueMin > this.inputValueMax) {
      this.inputValueMin = this.inputValueMax
    }
    if (type === 'max' && this.inputValueMax < this.inputValueMin) {
      this.inputValueMax = this.inputValueMin
    }
    this.$emit('change', [this.inputValueMin, this.inputValueMax])
  }
}
</script>

<style lang="less" scoped>
.input-number-range {
  display: flex;

  .ant-input-number {
    width: auto;
  }

  .divider {
    background-color: #666;
    display: inline-block;
    height: 1px;
    margin: 11px 8px 0;
    width: 18px;
  }
}
</style>
